<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
		<title>账单明细</title>
		<link rel="stylesheet" href="./../public/css/common.css">
		<link rel="stylesheet" href="./../public/css/pintuer.css">
		<!-- 日历插件css -->
		<link rel="stylesheet" href="./../public/css/dcalendar.picker.css" />
		<link rel="stylesheet" href="./css/bill-detail.css">
	</head>
	<body ms-controller="billDetail">
		<div class="content">
			<div>
				<div class="account_section ">
					<div class="line-big border section_common">
						<div class="x12">
							<!-- <div class="line-big bg-sub box-header">
								<div class="x8 title">
									账单明细
								</div>
								<div class="x4 text-right">
									<a href="javascript:;"></a>
								</div>
							</div> -->
							<div class="line-big text-center">
								<div class="x12">
									<span>日期范围：</span>
									<input id='mydatepicker' ms-duplex="@beginTime" class="commoninput" type='text' autocomplete="off"/>
									<input id='mydatepicker2' ms-duplex="@endTime" class="commoninput" type='text' autocomplete="off"/>
									<button class="button bg-sub" ms-click="@billDetailSearch"><img class="loadimg" :class="showLoad ? '' : 'hide'"  src="./../public/images/load3.gif" /><!-- <span class="icon-search"></span> -->搜索</button>
								</div>
								<div class="x12 tips"> 提示:支持最大跨度31天的账单</div>
							</div>
							<div class="line-big upload_detail" ms-if="@isshow">
								<div class="x12 text-left">
									<span class="bill_title">下载汇总账单:</span>
									<button class="button bg-green" ms-on-click="@DownloadAll('weixin', '微信')"><span class="icon-download"></span>下载微信汇总明细</button>
									<button class="button bg-sub"   ms-on-click="@DownloadAll('alipay', '支付宝')"><span class="icon-download"></span>下载支付宝汇总明细</button>
									<button class="button bg-yellow" ms-on-click="@DownloadAll('sfbank', '银行卡')"><span class="icon-download"></span>下载银行卡汇总明细</button>
								</div>
							</div>
							<!--  -->
							<div class="line-big bill_info" ms-if="@isshow">
								<div class="x12">
									<div class="line-big bill_info_title">
										<div class="x8 title">
											账单信息
										</div>
										<div class="x4 text-right">
											<a href="javascript:;"></a>
										</div>
									</div>
									<div class="line-big ">
										<div class="x12">
											<div class="table-responsive">
												<table class="table">
													<tr>
														<th>
															日期

														</th>
														<th>
															类型
														</th>
														<th>收入（元）</th>
														<th>收入笔数</th>

														<th>支出（元）</th>
														<th>支出笔数</th>
														<th>操作</th>
													</tr>
													<tr ms-for="(key,item) in @list">
														<td>
															{{key}}
														</td>
														<td>
															<p>支付宝</p>
															<p>微信</p>
															<p>银行卡</p>
															<p>总计</p>
														</td>
														<td>
															<p>{{item.alipay.in.amount}}</p>
															<p>{{item.weixin.in.amount}}</p>
															<p>{{item.sfbank.in.amount}}</p>
															<p>{{item.total.in.amount}}</p>
														</td>
														<td>
															<p>{{item.alipay.in.count}}</p>
															<p>{{item.weixin.in.count}}</p>
															<p>{{item.sfbank.in.count}}</p>
															<p>{{item.total.in.count}}</p>
														</td>
														<td>
															<p>{{item.alipay.out.amount}}</p>
															<p>{{item.weixin.out.amount}}</p>
															<p>{{item.sfbank.out.amount}}</p>
															<p>{{item.total.out.amount}}</p>
														</td>
														<td>
															<p>{{item.alipay.out.count}}</p>
															<p>{{item.weixin.out.count}}</p>
															<p>{{item.sfbank.out.count}}</p>
															<p>{{item.total.out.count}}</p>
														</td>
														<td>
															<p><button class="button bg-green table_btn" ms-on-click="@Download('weixin', key,'微信')"><span class="icon-download"></span>微信明细下载</button></p>
															<p><button class="button bg-sub table_btn" ms-on-click="@Download('alipay', key,'支付宝')"><span class="icon-download"></span>支付宝明细下载</button></p>
															<p><button class="button bg-yellow table_btn" ms-on-click="@Download('sfbank', key,'银行')"><span class="icon-download"></span>银行卡明细下载</button></p>
														</td>

													</tr>

												</table>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		
	</body>

	<!-- api 接口配置文档 -->
	<script src="./../api/api.js"></script>
	<!-- jquery -->
	<script src="./../public/js/jquery.js"></script>
	<!-- 拼图 js -->
	<script src="./../public/js/pintuer.js"></script>
	<!-- avalon js -->
	<script src="./../public/js/avalon.js"></script>
	<!-- 日历插件 -->
	<script type="text/javascript" src="./../public/js/dcalendar.picker.js"></script>
	<!-- common js -->
	<script src="./../public/js/common.js"></script>
	<!-- 账单明细js-->
	<script src="./js/bill-detail.js"></script>


</html>
